Scripting
文档
更新日志
隐私
文档
更新日志
隐私
简体中文

边框

border 属性用于为视图添加边框，可指定边框样式与可选的宽度。支持使用纯色、渐变、系统材质等视觉样式，并能根据系统浅色/深色模式自动切换。

定义

1border?: {
2  style: ShapeStyle | DynamicShapeStyle
3  width?: number
4}
  • style：必填，定义边框的视觉样式，支持 ShapeStyle 或 DynamicShapeStyle。
  • width：选填，设置边框的粗细（像素单位），默认值为 1。

使用示例

纯色边框

1<Text
2  border={{
3    style: "systemRed",
4    width: 2
5  }}
6>
7  带边框的文字
8</Text>

默认宽度（1px）边框

1<HStack
2  border={{
3    style: "#000000"
4  }}
5>
6  ...
7</HStack>

渐变边框

1<Text
2  border={{
3    style: {
4      gradient: [
5        { color: "red", location: 0 },
6        { color: "blue", location: 1 }
7      ],
8      startPoint: { x: 0, y: 0 },
9      endPoint: { x: 1, y: 1 }
10    },
11    width: 3
12  }}
13>
14  渐变边框
15</Text>

动态边框样式（浅色/深色模式自动切换）

1<Text
2  border={{
3    style: {
4      light: "gray",
5      dark: "white"
6    },
7    width: 1.5
8  }}
9>
10  自适应边框
11</Text>

注意事项

  • 边框将包裹整个视图边缘，并与视图尺寸和 frame 设置一起作用。
  • style 支持所有 ShapeStyle 类型，也可使用系统材质（如 "regularMaterial"、"ultraThinMaterial"）来创建原生 iOS 风格的边框。
大纲